<script setup lang="ts">
  import { addOrg, getOrgDetail } from '@/api/syssetting';
  import { FormInstance, Message } from '@arco-design/web-vue';
  import { ref, watch } from 'vue';
  import { deepClone } from '@arco-vue-pro-components/pro-components/es/pro-table/utils';
  import {
    addPolicy,
    getgeoarea,
    getgeocity,
    getGeoProvice,
  } from '@/api/policy';
  import { getpolicyIndex } from '@/api/dataCenter';
  import useLoading from '@/hooks/loading';
  import { omit } from 'lodash';
  const formRef = ref<FormInstance | null>(null);
  const { loading, setLoading } = useLoading(false);
  const props = defineProps({
    visible: Boolean,
    isEdit: Boolean,
    editParam: Number,
    industryAll: Array,
    directionAll: Array,
  });
  const emit = defineEmits(['update:visible', 'refresh']);
  const close = () => {
    emit('update:visible', false);
  };

  watch(
    () => props.editParam,
    (newVal) => {
      if (newVal) {
        getDetai(newVal);
      }
    },
    { immediate: true }
  );

  const getDetai = (id: any) => {
    getOrgDetail({
      org_id: id,
    }).then((res) => {
      console.log(res);
    });
  };

  const handleSubmit = async () => {
    if (!(await formRef.value?.checkForm())) {
      try {
        setLoading(true);
        const dataForm = formRef.value?.formModel;
        console.log(dataForm);
        addOrg({
          ...omit(
            dataForm,
            'policy_direction_id',
            'policy_industry_id',
            'policy_field_id'
          ),
        }).then((res) => {
          Message.success(res.msg);
          emit('update:visible', false);
          emit('refresh');
        });
      } catch (error) {
        setLoading(false);
      } finally {
        setLoading(false);
      }
    } else {
      Message.error('请正确填写表单！');
    }
  };
  let formFields = ref();
  const provice = ref(); // 省份
  const allpolicyarea = ref();
  onMounted(() => {
    getGeoProvice().then((pro) => {
      provice.value = pro.data;
      getpolicyIndex({
        page_size: 10000,
      }).then((allpolicy) => {
        allpolicyarea.value = allpolicy.data.list;
        formFields.value = [
          {
            label: '单位名称',
            name: 'org_name',
            fieldProps: {
              placeholder: '请输入',
              allowClear: true,
              maxLength: 50,
            },
            tooltip: '软件注册后，请不要随意修改单位名称，这会导致需要重新注册',
            rules: [
              {
                required: true,
                message: '单位名称不能为空',
                validateTrigger: ['input'],
              },
              {
                maxLength: 50,
                message: '不能超过50个字符',
                validateTrigger: ['input'],
              },
            ],
          },
          {
            name: 'policy_direction_id',
            label: '政策方向',
            type: 'a-select',
            selectOptions: props.directionAll,
            fieldProps: {
              span: 24,
              fieldNames: { value: 'direction_id', label: 'direction_name' },
              allowSearch: true,
              placeholder: '请选择',
            },
            rules: [
              {
                required: true,
                message: '请选择',
              },
            ],
          },
          {
            name: 'policy_industry_id',
            label: '政策行业',
            type: 'a-select',
            selectOptions: props.industryAll,
            fieldProps: {
              span: 24,
              fieldNames: { value: 'industry_id', label: 'industry_name' },
              allowSearch: true,
              placeholder: '请选择',
            },
            rules: [
              {
                required: true,
                message: '请选择',
              },
            ],
          },
          {
            name: 'policy_field_id',
            label: '政策领域',
            type: 'a-select',
            selectOptions: allpolicy.data.list,
            fieldProps: {
              span: 24,
              fieldNames: { value: 'field_id', label: 'field_name' },
              allowSearch: true,
              placeholder: '请选择',
            },
            rules: [
              {
                required: true,
                message: '请选择',
              },
            ],
          },
          {
            name: 'province_id',
            label: '省',
            type: 'a-select',
            fieldProps: {
              span: 24,
              allowSearch: true,
              fieldNames: { value: 'id', label: 'name' },
            },
            selectOptions: pro.data,
            rules: [
              {
                message: '请选择',
                required: true,
              },
            ],
          },
          {
            name: 'city_id',
            label: '市',
            type: 'a-tree-select',
            fieldProps: {
              span: 24,
              allowSearch: true,
              fieldNames: { value: 'id', label: 'name' },
            },
            selectOptions: [],
            rules: [
              {
                message: '请选择',
                required: true,
              },
            ],
          },
          {
            name: 'area_id',
            label: '区县',
            type: 'a-select',
            fieldProps: {
              span: 24,
              fieldNames: { value: 'id', label: 'name' },
              allowSearch: true,
            },
            selectOptions: [],
            rules: [
              {
                message: '请选择',
                required: true,
              },
            ],
          },
          {
            label: '机构代码',
            name: 'org_code',
            rules: [
              {
                required: true,
                message: '请输入',
                validateTrigger: ['blur'], // Arco 推荐触发方式
              },
            ],
            fieldProps: {
              placeholder: '请输入',
              allowClear: true,
              maxLength: 200,
            },
          },
          {
            label: '电话',
            name: 'org_contact',
            rules: [
              {
                required: true,
                message: '请输入',
                validateTrigger: ['blur'], // Arco 推荐触发方式
              },
            ],
            fieldProps: {
              placeholder: '请输入',
            },
          },
          {
            label: '地址',
            name: 'org_address',
            fieldProps: {
              placeholder: '请输入',
            },
            rules: [
              {
                required: true,
                message: '请输入',
                validateTrigger: ['blur'], // Arco 推荐触发方式
              },
            ],
          },
          {
            label: '官方网站',
            name: 'org_website',
            fieldProps: {
              placeholder: '请输入',
            },
          },
          {
            label: '电子邮件',
            name: 'org_email',
            fieldProps: {
              placeholder: '请输入',
            },
          },
          {
            label: '邮政编码',
            name: 'org_postal_code',
            fieldProps: {
              placeholder: '请输入',
            },
          },
          {
            label: '银行账号',
            name: 'org_account_num',
            fieldProps: {
              placeholder: '请输入',
            },
          },
          {
            label: '开户银行',
            name: 'org_account_bank',
            fieldProps: {
              placeholder: '请输入',
            },
          },
        ];
      });
    });
  });

  const formData = reactive({
    org_name: '', //组织名称 *    org_code: '', //组织代码 *
    org_contact: '', //联系电话 *
    org_address: '', //联系地址 *
    org_website: '', //官方网址
    org_email: '', //电子邮箱
    org_postal_code: '', //邮政编码
    org_account_bank: '', //开户银行
    org_account_num: '', //银行账户
  });

  const city = ref();
  // 市
  watch(
    () => formRef.value?.formModel.province_id,
    (newVal) => {
      getgeocity({
        province_id: newVal,
      }).then((res) => {
        formRef.value?.setFormItm('area_id', '');
        formRef.value?.setFormItm('city_id', '');
        city.value = res.data;
        formFields.value = [
          {
            label: '单位名称',
            name: 'org_name',
            fieldProps: {
              placeholder: '请输入',
              allowClear: true,
              maxLength: 50,
            },
            tooltip: '软件注册后，请不要随意修改单位名称，这会导致需要重新注册',
            rules: [
              {
                required: true,
                message: '单位名称不能为空',
                validateTrigger: ['input'],
              },
              {
                maxLength: 50,
                message: '不能超过50个字符',
                validateTrigger: ['input'],
              },
            ],
          },
          {
            name: 'org_direction_id',
            label: '政策方向',
            type: 'a-select',
            selectOptions: props.directionAll,
            fieldProps: {
              span: 24,
              fieldNames: { value: 'direction_id', label: 'direction_name' },
              allowSearch: true,
              placeholder: '请选择',
            },
            rules: [
              {
                required: true,
                message: '请选择',
              },
            ],
          },
          {
            name: 'org_industry_id',
            label: '政策行业',
            type: 'a-select',
            selectOptions: props.industryAll,
            fieldProps: {
              span: 24,
              fieldNames: { value: 'industry_id', label: 'industry_name' },
              allowSearch: true,
              placeholder: '请选择',
            },
            rules: [
              {
                required: true,
                message: '请选择',
              },
            ],
          },
          {
            name: 'org_field_id',
            label: '政策领域',
            type: 'a-select',
            selectOptions: allpolicyarea.value,
            fieldProps: {
              span: 24,
              fieldNames: { value: 'field_id', label: 'field_name' },
              allowSearch: true,
              placeholder: '请选择',
            },
            rules: [
              {
                required: true,
                message: '请选择',
              },
            ],
          },
          {
            name: 'province_id',
            label: '省',
            type: 'a-select',
            fieldProps: {
              span: 24,
              allowSearch: true,
              fieldNames: { value: 'id', label: 'name' },
            },
            selectOptions: provice.value,
            rules: [
              {
                message: '请选择',
                required: true,
              },
            ],
          },
          {
            name: 'city_id',
            label: '市',
            type: 'a-select',
            fieldProps: {
              span: 24,
              allowSearch: true,
              placeholder: '请选择',
              fieldNames: { value: 'id', label: 'name' },
            },
            selectOptions: res.data,
            rules: [
              {
                message: '请选择',
                required: true,
              },
            ],
          },
          {
            name: 'area_id',
            label: '区县',
            type: 'a-select',
            fieldProps: {
              span: 24,
              fieldNames: { value: 'id', label: 'name' },
              allowSearch: true,
            },
            selectOptions: [],
            rules: [
              {
                message: '请选择',
                required: true,
              },
            ],
          },
          {
            label: '机构代码',
            name: 'org_code',
            rules: [
              {
                required: true,
                message: '请输入',
                validateTrigger: ['blur'], // Arco 推荐触发方式
              },
            ],
            fieldProps: {
              placeholder: '请输入',
              allowClear: true,
              maxLength: 200,
            },
          },
          {
            label: '电话',
            name: 'org_contact',
            rules: [
              {
                required: true,
                message: '请输入',
                validateTrigger: ['blur'], // Arco 推荐触发方式
              },
            ],
            fieldProps: {
              placeholder: '请输入',
            },
          },
          {
            label: '地址',
            name: 'org_address',
            fieldProps: {
              placeholder: '请输入',
            },
            rules: [
              {
                required: true,
                message: '请输入',
                validateTrigger: ['blur'], // Arco 推荐触发方式
              },
            ],
          },
          {
            label: '官方网站',
            name: 'org_website',
            fieldProps: {
              placeholder: '请输入',
            },
          },
          {
            label: '电子邮件',
            name: 'org_email',
            fieldProps: {
              placeholder: '请输入',
            },
          },
          {
            label: '邮政编码',
            name: 'org_postal_code',
            fieldProps: {
              placeholder: '请输入',
            },
          },
          {
            label: '银行账号',
            name: 'org_account_num',
            fieldProps: {
              placeholder: '请输入',
            },
          },
          {
            label: '开户银行',
            name: 'org_account_bank',
            fieldProps: {
              placeholder: '请输入',
            },
          },
        ];
      });
    }
  );
  // // 区
  watch(
    () => formRef.value?.formModel.city_id,
    (newVal) => {
      if (newVal) {
        getgeoarea({
          city_id: newVal,
        }).then((res) => {
          formRef.value?.setFormItm('area_id', '');
          formFields.value = [
            {
              label: '单位名称',
              name: 'org_name',
              fieldProps: {
                placeholder: '请输入',
                allowClear: true,
                maxLength: 50,
              },
              tooltip:
                '软件注册后，请不要随意修改单位名称，这会导致需要重新注册',
              rules: [
                {
                  required: true,
                  message: '单位名称不能为空',
                  validateTrigger: ['input'],
                },
                {
                  maxLength: 50,
                  message: '不能超过50个字符',
                  validateTrigger: ['input'],
                },
              ],
            },
            {
              name: 'org_direction_id',
              label: '政策方向',
              type: 'a-select',
              selectOptions: props.directionAll,
              fieldProps: {
                span: 24,
                fieldNames: { value: 'direction_id', label: 'direction_name' },
                allowSearch: true,
                placeholder: '请选择',
              },
              rules: [
                {
                  required: true,
                  message: '请选择',
                },
              ],
            },
            {
              name: 'org_industry_id',
              label: '政策行业',
              type: 'a-select',
              selectOptions: props.industryAll,
              fieldProps: {
                span: 24,
                fieldNames: { value: 'industry_id', label: 'industry_name' },
                allowSearch: true,
                placeholder: '请选择',
              },
              rules: [
                {
                  required: true,
                  message: '请选择',
                },
              ],
            },
            {
              name: 'org_field_id',
              label: '政策领域',
              type: 'a-select',
              selectOptions: allpolicyarea.value,
              fieldProps: {
                span: 24,
                fieldNames: { value: 'field_id', label: 'field_name' },
                allowSearch: true,
                placeholder: '请选择',
              },
              rules: [
                {
                  required: true,
                  message: '请选择',
                },
              ],
            },
            {
              name: 'province_id',
              label: '省',
              type: 'a-select',
              fieldProps: {
                span: 24,
                allowSearch: true,
                fieldNames: { value: 'id', label: 'name' },
              },
              selectOptions: provice.value,
              rules: [
                {
                  message: '请选择',
                  required: true,
                },
              ],
            },
            {
              name: 'city_id',
              label: '市',
              type: 'a-select',
              fieldProps: {
                span: 24,
                allowSearch: true,
                placeholder: '请选择',
                fieldNames: { value: 'id', label: 'name' },
              },
              selectOptions: city.value,
              rules: [
                {
                  message: '请选择',
                  required: true,
                },
              ],
            },
            {
              name: 'area_id',
              label: '区县',
              type: 'a-select',
              fieldProps: {
                span: 24,
                fieldNames: { value: 'id', label: 'name' },
                allowSearch: true,
              },
              selectOptions: res.data,
              rules: [
                {
                  message: '请选择',
                  required: true,
                },
              ],
            },
            {
              label: '机构代码',
              name: 'org_code',
              rules: [
                {
                  required: true,
                  message: '请输入',
                  validateTrigger: ['blur'], // Arco 推荐触发方式
                },
              ],
              fieldProps: {
                placeholder: '请输入',
                allowClear: true,
                maxLength: 200,
              },
            },
            {
              label: '电话',
              name: 'org_contact',
              rules: [
                {
                  required: true,
                  message: '请输入',
                  validateTrigger: ['blur'], // Arco 推荐触发方式
                },
              ],
              fieldProps: {
                placeholder: '请输入',
              },
            },
            {
              label: '地址',
              name: 'org_address',
              fieldProps: {
                placeholder: '请输入',
              },
              rules: [
                {
                  required: true,
                  message: '请输入',
                  validateTrigger: ['blur'], // Arco 推荐触发方式
                },
              ],
            },
            {
              label: '官方网站',
              name: 'org_website',
              fieldProps: {
                placeholder: '请输入',
              },
            },
            {
              label: '电子邮件',
              name: 'org_email',
              fieldProps: {
                placeholder: '请输入',
              },
            },
            {
              label: '邮政编码',
              name: 'org_postal_code',
              fieldProps: {
                placeholder: '请输入',
              },
            },
            {
              label: '银行账号',
              name: 'org_account_num',
              fieldProps: {
                placeholder: '请输入',
              },
            },
            {
              label: '开户银行',
              name: 'org_account_bank',
              fieldProps: {
                placeholder: '请输入',
              },
            },
          ];
        });
      }
    }
  );
</script>
<script lang="ts">
  export default {
    name: 'company',
  };
</script>

<template>
  <a-modal
    title="添加机构"
    width="600px"
    :visible="visible"
    title-align="start"
    :onOk="handleSubmit"
    @cancel="close"
    :ok-loading="loading"
  >
    <pro-form
      ref="formRef"
      hiddenBtn
      :form-json="formFields"
      :form-data="formData"
    ></pro-form>
  </a-modal>
</template>

<style scoped lang="less"></style>
